<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div style="margin: 20px auto; border: 1px solid red;">
			<canvas id="canvas" style="display: block;margin: 20px auto;"></canvas>
		</div>
		<div style="margin: 20px auto; border: 1px solid red;">
			<input id="range" type="range" min="0.2" max="2.0" step="0.2" value="1.0" style="display: block; margin: 2px auto;"/>
		</div>
	</body>
	<script type="text/javascript">
		var canvas = document.getElementById("canvas");
		var context = canvas.getContext("2d");
		var range = document.getElementById("range");
		var isMouseDown = false;
		var curX;
		var curY;
		var img = new Image;
		img.src = "56-刘昕男/company-2.png";
		
		img.onload = function(){
			canvas.width = img.width;
			canvas.height = img.height;
			paintImage(range.value);
//			context.drawImage(img,0,0);
			context,strokeStyle = "#ddd";
			context.beginPath();
			context.strokeRect(0,0,canvas.width,canvas.height);
			context.stroke();
			context.closePath();
		}
		
		range.onchange = function(event){
			var scale = this.value;
			paintImage(scale);
		}
		range.onmousemove = function(event){
			if(true == isMouseDown){
				paintImage(this.value);
			}
		}
		range.onmousedown = function(event){
			isMouseDown = true;
			curX = event.clientX;
			curY = event.clientY;
			
		}
		range.onmouseup = function(event){
			isMouseDown = false;
		}
		function paintImage(scale){
			var curImageWidth = scale * img.width;
			var curImageHeight = scale * img.height;  
//			context.drawImage(img,0,0);
			var offsetX = (canvas.width - curImageWidth)/2;
			var offsetY = (canvas.height - curImageHeight)/2;
			context.clearRect(0,0,canvas.width,canvas.height);
			context.drawImage(img,offsetX,offsetY,curImageWidth,curImageHeight);
			context.font = "bold 30px 微软雅黑"
			context.textAlign = "left";
			context.fillText("hahahaha",100,100);
		}
	</script>
</html>
